<template>
  <div class="adminqianming">
    <admin_top></admin_top>
    <div style="padding: 0 20px;">
      <div style="display: flex;">
        <el-input v-model="searchform.id_card" placeholder="身份证号"></el-input>
        <el-input v-model="searchform.mobile" placeholder="手机号"></el-input>
        <el-input v-model="searchform.address" placeholder="地址"></el-input>
        <el-button size="mini" type="danger" @click="searchbtn">搜索</el-button>
      </div>
      <el-button style="margin-top: 20px;margin-bottom:20px;" size="mini" type="danger" @click="openadd">新增黑名单</el-button>
      <el-table
      v-if='tableData.length!=0'
      :data="tableData"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="id_card"
        label="身份证">
      </el-table-column>
      <el-table-column
        align="center"
        prop="mobile"
        label="手机号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          @click="handleDelete( scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
      
    </div>
    <!-- 添加弹窗 -->
    <el-dialog
      title="增加黑名单"
      :visible.sync="addblackshow"
      width="500px"
      :before-close="handleClose">
      <el-input class="t_open_input" v-model="addform.id_card" placeholder="请输入身份证号"></el-input>
      <el-input class="t_open_input" v-model="addform.address" placeholder="请输入地址"></el-input>
      <el-input class="t_open_input" v-model="addform.mobile" placeholder="请输入手机号"></el-input>
      <div style="text-align: center;">
        <el-button type="primary" @click="upblack">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import admin_top from './top.vue';
  import axios from 'axios'
  export default {
    components: {
      admin_top
    },
    name: 'adminqianming',
    data() {
      return {
        tableData: [],
        addblackshow:false,
        addform:{
          id_card:'',
          address:'',
          mobile:'',
        },
        searchform:{
          id_card:'',
          address:'',
          mobile:'',
          
        }
      }
    },
    watch: {

    },
    computed: {

    },
    created() {
      // this.getlist()
    },
    methods: {
      //打开新增弹窗
      openadd(){
        this.addform.id_card = ''
        this.addform.address = ''
        this.addform.mobile = ''
        this.addblackshow = true

      },
      //提交
      upblack(){
        if(this.addform.id_card==''&&this.addform.address==''&&this.addform.mobile==''){
          this.$message.error('请添加一个内容');
          return
        }
        this.$confirm('是否确认提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/admin/black/add',this.addform)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
              this.addblackshow = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      //删除
      handleDelete(id){
        if(this.searchform.id_card!=''){
          var type = 3
        }else if(this.searchform.address!=''){
          var type = 1
        }else if(this.searchform.mobile!=''){
          var type = 2
        }
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get('/api/plan-market/admin/black/cancel',{
            params:{
              id:id,
              type:type
            }
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      //搜索
      searchbtn(){
        //获取全部
        this.getlist()
      },
      //分页
      changepage(val){
        console.log(val)
        this.searchform.page=val
        //获取全部
        this.getlist()
      },
      //获取全部
      getlist: function() {
        var that = this
        axios.get('/api/plan-market/admin/black/list',{
          params:this.searchform
        })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data.data
              console.log(this.tableData)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

    },

  }
</script>

<style scoped>
  .adminqianming {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;
  }
  .el-input {
      width: 250px;
      margin-right: 10px;
    }
  .t_open_input{
    width: 100%;
    margin-bottom: 20px;
    
  }
  /deep/.t_open_input .el-input__inner{
    background-color: #f6f6f6;
    border: none;
  }
</style>
